<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我要卖</title>
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/public.css">
    <style>
        .btns {
            justify-content: space-around;
            background: #F6F7FB;
        }

        .yijia,
        .yidian {
            width: 3rem;
            height: 3rem;
        }

        .subTitle {
            border: none;
            background: #fff;
        }

        .list {
            width: 100%;
            box-sizing: border-box;
            padding: 0.24rem;
            background: #F3F3F3;
            flex-wrap: wrap;
        }

        .list_li {
            background: #fff;
            margin: 0 0.08rem;
            margin-top: 0.16rem;
            box-sizing: border-box;
            width: 2.213rem;
            height: 2.453rem;
            text-align: center;
            color: #000000;
            font-size: 0.346rem;
            padding: 0.293rem 0;
        }

        .list_li_img {
            width: 1.333rem;
            height: 1.333rem;
            margin-bottom: 0.133rem;
        }
    </style>
    <script src="./js/index.js"></script>
</head>

<body>
    <main>
        <!-- 轮播图 -->
        <div class="swiper-container top_img">
            <div class="swiper-wrapper">
                <img class="swiper-slide slide" src="./img/slide.png" alt="">
                <img class="swiper-slide slide" src="./img/slide.png" alt="">
                <img class="swiper-slide slide" src="./img/slide.png" alt="">
                <img class="swiper-slide slide" src="./img/slide.png" alt="">
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <div class="flex btns">
            <img class="yijia" src="./img/yijia.png" alt="">
            <img class="yidian" src="./img/yidian.png" alt="">
        </div>
        <div class="subTitle">
            <div class="subTitle_text">推荐产品</div>
        </div>
        <div class="flex list">
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
            <div class="list_li">
                <img class="list_li_img" src="./img/xyj.png" alt="">
                <div>洗衣机</div>
            </div>
        </div>
        <div class="flex footer">
            <div class="footer_li footer_active sy">
                <img src="./img/footer_img1.png" alt="">
                <div>首页</div>
            </div>
            <div class="footer_li fl">
                <img src="./img/footer_img2.png" alt="">
                <div>分类</div>
            </div>
            <div class="footer_li fw">
                <img src="./img/footer_img3.png" alt="">
                <div>服务</div>
            </div>
            <div class="footer_li wd">
                <img src="./img/footer_img4.png" alt="">
                <div>我的</div>
            </div>
        </div>
    </main>

    <script src="./js/jquery.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/public.js"></script>
    <script>
        //轮播图
        var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            autoplay: {
                disableOnInteraction: false,
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },

        })
        $('.yijia').click(function () {
            location.href = './yijia.html';
        })
        $('.yidian').click(function () {
            location.href = './yidian.html';
        })
    </script>
</body>

</html>